<%@page import="java.util.List"%>
<%@page import="com.wanmait.hotelManage.vo.Userinfo"%>
<%@page import="com.wanmait.hotelManage.vo.RoomTypeComment"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.wanmait.hotelManage.vo.Roomimages"%>
<%@page import="java.sql.Timestamp"%>
<%@page import="com.wanmait.hotelManage.vo.RoomType"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <% Userinfo userinfo=(Userinfo)session.getAttribute("userinfo"); %>
<jsp:include page="/inc/header.jsp"/>
<%
	String path=request.getContextPath();
String endTime=(String)request.getAttribute("endTime");
String startTime=(String)request.getAttribute("startTime");
String f=(String)request.getAttribute("msg");
List<RoomType> roomTypes=(List<RoomType>)request.getAttribute("roomTypes");
List<Roomimages>images=(List<Roomimages>)request.getAttribute("images");
ArrayList<RoomTypeComment>roomTyepComments=(ArrayList<RoomTypeComment>)request.getAttribute("roomTypeComments");
Integer sum=(Integer)request.getAttribute("sum");
%>

     <!--Page Title-->
    <section class="page-title text-center">
        <div class="auto-container">
            <div class="content-box">
                <div class="title">客房详情</div>
                <ul class="bread-crumb">
                    <li><a href="index.html">主页<i class="fa fa-angle-right"></i></a></li>
                    <li>客房详情</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- rooms details section -->
    <section class="rooms-details">
    	<div class="container">
    		<div class="row">
    			<div id="room" class="col-md-8 col-sm-8 col-xs-12">
    				<div class="rooms-details-content">
    					<div class="img-box">
    					<%
    					if(images!=null){
    					%>
    						<figure><img id="img" style="width:770px;height:520px" src="static/images/rooms/<%=images.get(0).getPic() %>" alt=""></figure>
    						 <div id="list">
    				<span>		 <img id="img0" style="width:192px;height:146px" src="static/images/rooms/<%=images.get(0).getPic() %>" alt=""></span>
    				<span>		 <img id="img1" style="width:192px;height:146px" src="static/images/rooms/<%=images.get(1).getPic() %>" alt=""></span>
    				<span>		 <img id="img2" style="width:193px;height:146px" src="static/images/rooms/<%=images.get(2).getPic() %>" alt=""></span>
    				<span>		 <img id="img3" style="width:193px;height:146px" src="static/images/rooms/<%=images.get(3).getPic() %>" alt=""></span>
    						 </div>
    					<%
    					}
    					%>
    					</div>
    					<%RoomType roomType=(RoomType)request.getAttribute("roomType"); %>
    					<!--房间详情-->
    					<div id="aa"></div>
    					<input id="roomType" type="hidden" value="<%=roomType.getTitle()%>">
    					<div class="lower-content">
    						<h2><%=roomType.getTitle() %></h2>
    						<div class="text"><span style="text-decoration: line-through;"><%=roomType.getPrice() %>元</span> / 原价</div>
    						<div class="text"><span><%=roomType.getDiscountPrice() %> 元</span> / 现价</div>
    						<ul class="rating">
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    						</ul>
    						
    						<div style=""><%=roomType.getDescription() %></div>
    					
    					</div>
    					<!--房间信息-->
    					<div class="rooms-catagori">
    						<h3>房间 详情</h3>
    						<div class="row">
    							<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>WIFI</li>
    									<li>空调</li>
    									<li>厨房</li>
    								</ul>
    							</div>
    						</div>
    					</div>
    					<!--客户评论-->
    					<div class="client-reviews">
    						<h3>客户评论</h3>
    						<div class="default-form">
		                      
		                    </div>
    					 <!--所有评论-->
                        <div class="comment-area">
                            <div class="comment-title"><h3>评论 (<%=sum %>)</h3></div>
                            <%
                            if(roomTyepComments!=null){
                            	for(int i=0;i<roomTyepComments.size();i++){
                            		RoomTypeComment roomTypeComment=roomTyepComments.get(i);
                            		%>
                                 <div style="margin-top:-10px;font-family:SimHei;font-size:20px" class="comment-name"><%=roomTypeComment.getUserinfo().getUsername() %>
                                  <a id="spana" data-id="<%=roomTypeComment.getId()%>" class="ac" href="javascript:void(0)">举报</a></div>&nbsp;&nbsp; <span style="font-family:SimHei;font-size:20px"><%=roomTypeComment.getContent() %></span>
                              <%
                            	}
                            }
                            %>
                           <%--  <div class="comment-box">
                                <figure><img src="<%=path %>/static/images/news/comment-3.png" alt=""></figure>
                                <div class="comment-inner">
                                    <div class="comment-name">Jessica Brown</div>
                                    <div class="comment-info"><i class="fa fa-calendar"></i>  Mar 20, 2016</div>
                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudant tota rem ape riamipsa eaque  quae nisi ut aliquip commodo consequat. </p>
                                </div>
                            </div> --%>
                        </div>
                        	   <!--发表评论-->
                        <div class="comment-form">
                            <div class="comment-title"><h3>评论</h3></div>
                           
                            <form id="contact-form" name="contact_form" class="default-form" action="<%=path %>/commentServerlet?action=comment" method="post">
                                <div class="row">
                                <input type="hidden" name="roomTypeName" value="<%=roomType.getTitle()%>">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <textarea placeholder="发表你的评论" name="content" required=""></textarea>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="hidden" name="userinfoid" value="<%=userinfo.getId()%>">
                                        <input type="hidden" name="roomtypeid" value="<%=roomType.getId()%>">
                                        <input type="hidden" name="roomtypeid" value="<%=roomType.getTitle()%>"> 
                                        
                                    </div>
                                    <!-- <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="email" name="form_email" value="" placeholder="Your Email" required="">
                                    </div> -->
                                </div>
                                <button type="submit" class="btn-one" data-loading-text="Please wait...">提交评论</button>
                            </form>
                        </div>
    			<!-- 评论结束 -->
    					</div>
    					
    				</div>
    			</div>
    			
    			<!--订单-->
          <form id="myfrom" method="post" action="<%=request.getContextPath() %>/OrderServlet?action=order">
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="sidbar-content">
              <h3>预订房间</h3>  
                      <!-- <div class="date"> -->
                
                          <!-- <i class="fa fa-calendar" aria-hidden="true"></i>   -->
                  <input type="date" value="<%=startTime %>" name="ydate" id="startTime" placeholder="预定 日期" > 
                        
                        <!--  <i class="fa fa-calendar" aria-hidden="true"></i>  -->
                         <input type="date" value="<%=endTime %>" name="tdate" id="endTime" placeholder="退房 日期" > 
                        
                      <!-- </div> -->
                       <div  style="height:50px;margin-top:20px; ">
                         <input style="width: 10px;height: 10px;" id="car" name="car" type="checkbox"><span style="width: 10px;">预定车:(保留2个小时)</span>
                           <input  type="datetime-local" id="time" > 
                          <!-- <p><input type="text" name="datetime" class="ui_timepicker" value=""></p> -->
                          
                          </div>
                      
                      <div  style="height:50px;margin-top:30px; ">
                        早餐:
                      <select id="breakfast">
                        <option>不带早餐</option>
                        <option>带早餐</option>
                      </select>
                       </div>
                       <div  style="height:50px;margin-top:20px; ">
                          姓名:
                        <input name="username" id="username" type="text">
                        </div>
                      <div style="height:50px;margin-top:20px; ">
                          电话号:
                        <input  name="phone" id="phone" type="text">
                        </div>
                      <div style="height:70px;margin-top:30px; ">
                      
                      房型:
                      <select id="roomTypes">
                      <%
                      for(RoomType roomtype:roomTypes){
                         %>
                        <option class="RoomType"><%=roomtype.getTitle() %></option>
                        <%
                      }
                      %>
                      </select>
                      
                      <h3 style="color: red;" id="titleMsg"></h3>
                      </div>

                      <input id="but" type="button"  style="height:50px;margin-top:40px; " class="btn-one" value="提交"></input>
            </div>
          </div>
          </form>
    		
    		</div>
    	</div>
    	
    </section>
    <script src="<%=request.getContextPath() %>/static/js/jquery-3.5.1.min.js"></script>
    <script>
    $(function(){
    	//初始化值
    	$("#roomTypes").val("<%=roomType.getTitle()%>");

    	//改变房型
    	$("#roomTypes").change(function(){
    		$.ajax({
    			url:"<%=path%>/roomListServlet?action=showRoomDetail",
    			data:{roomType:$("#roomTypes").val()},
    			success:function(msg){
    				$("#room").html(msg);
    			}
    		})
    	});
    	
    	//得到当前时间
    	var date_now = new Date();
    	//得到当前年份
    	var year = date_now.getFullYear();
    	//得到当前月份
    	//注：
    	//  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
    	//  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
    	var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
    	//得到当前日子（多少号）
    	var date1 = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
    	var date2 = date_now.getDate()+1 < 10 ? "0"+(date_now.getDate()+1) : (date_now.getDate()+1);
    	//设置input标签的max属性
    	$("#startTime").attr("min",year+"-"+month+"-"+date1);
    	$("#endTime").attr("min",year+"-"+month+"-"+date2);
    	if($("#startTime").val()==""){
	    	$("#startTime").val(year+"-"+month+"-"+date1);
	    	$("#endTime").val(year+"-"+month+"-"+date2);
    	}
    	
    	$("#time").attr("value",year+"-"+month+"-"+date1+"T12:00");
    	$("#time").attr("min",year+"-"+month+"-"+date1+"T12:00");
    	$("#time").attr("max",year+"-"+month+"-"+date1+"T23:00");
    	//开始日期
    	$("#startTime").change(function(){
    		$("#titleMsg").html("");
    		var v=$(this).val();
          // 转换bai日期格式
            v = v.replace(/-/g, '/'); // "2010/08/01";
           // 创建日期对象
            var date1 = new Date(v);
            // 加一天du
            date1.setDate(date1.getDate() + 1);
          //得到当前年份
        	 year = date1.getFullYear();
        	//得到当前月份
        	//注：
        	//  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
        	//  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
        	 month = date1.getMonth()+1 < 10 ? "0"+(date1.getMonth()+1) : (date1.getMonth()+1);
        	//得到当前日子（多少号）
        	 date = date1.getDate() < 10 ? "0"+date1.getDate() : date1.getDate();
            $("#time").attr("value",year+"-"+month+"-"+(date-1)+"T12:00");
            $("#time").attr("min",year+"-"+month+"-"+(date-1)+"T12:00");
        	$("#time").attr("max",year+"-"+month+"-"+(date-1)+"T23:00");
        	 
        	var end= $("#endTime").val();
        	end=end.replace(/-/g, '/');
        	var date2=new Date(end);
          	if(date1.getTime()>date2.getTime()){
    			$("#endTime").val(year+"-"+month+"-"+(date));
          	}
    		$("#endTime").attr("min",year+"-"+month+"-"+(date));
    		
    		
    	})
    	//退订日期
    	$("#endTime").change(function(){
    		$("#titleMsg").html("");
    		var v=$(this).val();
          // 转换bai日期格式
            v = v.replace(/-/g, '/'); // "2010/08/01";
            // 创建日期对象
            var date1 = new Date(v);
            // 加一天du
            date1.setDate(date1.getDate() - 1);
         
          //得到当前年份
        	 year = date1.getFullYear();
        	//得到当前月份
        	//注：
        	//  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
        	//  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
        	 month = date1.getMonth()+1 < 10 ? "0"+(date1.getMonth()+1) : (date1.getMonth()+1);
        	//得到当前日子（多少号）
        	 date = date1.getDate() < 10 ? "0"+date1.getDate() : date1.getDate();
          	
    		$("#startTime").attr("max",year+"-"+month+"-"+(date));
    	})
    	//
    	$("#time").change(function() {
		});
    	
    	//提交
	    $("#but").click(function(){
	    	var time="";
	    	if($("#car").prop("checked")){
	    		time=$("#time").val();
	    	}

	    	
	    	var startTime=$("#startTime").val();
	    	var endTime=$("#endTime").val();
	    	var username=$("#username").val();
	    	var phone =$("#phone").val();
	    	var roomType=$("#roomType").val();
	    	var car=$("#car").prop("checked");
	    	var breakfast=$("#breakfast").val();
	    	
	    	if(username==""){
	    		alert("姓名不能为空");
	    		return;
	    	}
	    	if(phone==""){
	    		alert("手机号不能为空");
	    		return;
	    	}
	    	var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
	    	var flag = reg.test(phone); //true
	    	if(!flag){
	    		alert("手机号格式不正确");
	    		return;
	    	}
	    	
	    	$.ajax({
	    		url:"<%=request.getContextPath() %>/OrderServlet?action=order",
	    		data:{
	    			startTime:startTime,
	    			endTime:endTime,
	    			username:username,
	    			phone:phone,
	    			roomType:roomType,
	    			time:time,
	    			car:car,
	    			breakfast:breakfast
	    		},
	    		success:function(msg){
	    			if ("t"==msg) {
	    				$("#titleMsg").html("");
						alert("预定成功");
						
					} else if("f"==msg){
						$("#titleMsg").html("房间已满");
					}else if("login"==msg){
						window.location.href="<%=request.getContextPath()%>/login.jsp";
					}else if("c"==msg){
						$("#titleMsg").html("车子已满");
					}
	    		}
	    		
	    	})
	    	
	    	if("<%=f%>"=="no"){
	    		alert("房间已满");
	    		return;
	    	} 
	    	
	    })
	    if("<%=f%>"=="no"){
	    	$("#titleMsg").html("房间已满");
	    }
    })
    </script>
    <!-- rooms details section end -->
 <jsp:include page="/inc/footer.jsp"/>
 <style>
 #list {
            float: left;
            font-size:0
            }
            #aa{
            height:150px;
            }
            #list span{
            /* margin-left:40px */
            }
 </style>
 <script>
	 var imgs=["static/images/rooms/<%=images.get(0).getPic() %>","static/images/rooms/<%=images.get(1).getPic() %>",
		 "static/images/rooms/<%=images.get(2).getPic() %>","static/images/rooms/<%=images.get(3).getPic() %>"];
	 $(function(){
		/*   var xc=setInterval(go,2000);  */
		  $("#img2").mouseover(function(){
              var s=$(this).attr("src");
              $("#img").attr("src",s);
             /*  clearInterval(xc); */
          })
          $("#img2").mouseout(function(){
              var s=$(this).attr("src");
              $("#img").attr("src",s);
              
            /*   xc=setInterval(go,2000); */
          })
          $("#img3").mouseover(function(){
              
              var s=$(this).attr("src");
              $("#img").attr("src",s);
             /*  clearInterval(xc); */
          })
          $("#img3").mouseout(function(){
              var s=$(this).attr("src");
              $("#img").attr("src",s);
             /*  xc=setInterval(go,2000); */
          })
           $("#img1").mouseover(function(){
              
              var s=$(this).attr("src");
              $("#img").attr("src",s);
            /*   clearInterval(xc); */
          })
          $("#img1").mouseout(function(){
              var s=$(this).attr("src");
              $("#img").attr("src",s);
             /*  xc=setInterval(go,2000); */
          })
           $("#img0").mouseover(function(){
              
              var s=$(this).attr("src");
              $("#img").attr("src",s);
             /*  clearInterval(xc); */
          })
          $("#img0").mouseout(function(){
              var s=$(this).attr("src");
              $("#img").attr("src",s);
             /*  xc=setInterval(go,2000); */
          })
           $(".ac").click(function(){
			 if(!window.confirm("确定要举报吗")){
				 return false;
			 }
			 var id=$(this).data("id");
			 $.ajax({
				 url:"<%=path%>/roomListServlet?action=de",
					 data:{id:id},
						 success:function(msg){
							 if(msg=="ok"){
						 alert("举报成功,请等待管理员审批")
					 }else if(msg=="no"){
						 window.location.href="<%=path%>/login.jsp";
					 }
						 }
			 })
		 })
 })
 /* function go(){
		 var src=$("#img").attr("src");
		 for(var i=0;i<imgs.length;i++){
			 if(src==imgs[i]){
				 if(i==3){
					 $("#img").attr("src",imgs[0]);
				 }else{
					 $("#img").attr("src",imgs[i+1]);
				 }
			 }
		 }
	 } */
 </script>